<!--suppress ALL -->
<template>
  <CenterVue>
    <div class="draw">
      <span>| 服务管理 ></span> 服务列表
      <a-form>
        <div class="tool">
          <a-select
            :default-value="selection"
            style="width: 176px"
            @change="handleSelectionChange"
          >
            <a-select-option
              v-for="select in selectionData"
              :key="select"
            >
              {{ select }}
            </a-select-option>
          </a-select>
          <a-select
            v-model="secondOption"
            style="width: 350px"
          >
            <a-select-option
              v-for="op in option"
              :key="op"
            >
              {{ op }}
            </a-select-option>
          </a-select>
          <a-button
            type="primary"
            icon="search"
            @click="queryBySelection()"
          >
            Search
          </a-button>
          <!--新增服务按钮-->
          <a-button
            style="margin-left: 385px;"
            icon="plus"
            @click="newItemModal = true"
          >
            新服务
          </a-button>
        </div>
      </a-form>
      <a-input-group compact />
      <div class="my_table">
        <template>
          <a-table
            :columns="columns"
            :data-source="data"
            :scroll="{y: 750 }"
            :pagination="pagination"
            :current="pagination.current"
            row-key="id"
            @change="tableChange"
            bordered
          >
            <template
              slot="action"
              slot-scope="record"
            >
              <a-button
                type=""
                slot="action"
                @click="getInfo(record)"
              >
                详情
              </a-button>
              <a-button
                type="primary"
                slot="action"
                @click="showDrawer(record)"
              >
                修改
              </a-button>
              <a-popconfirm
                placement="left"
                ok-text="Yes"
                cancel-text="No"
                @confirm="confirm"
                @cancel="cancel"
              >
                <template slot="title">
                  <p>{{ title }}</p>
                  <p>服务ID: {{ ServeItemSelected.id }}</p>
                </template>
                <a-button
                  type="danger"
                  @click="getGoodsId(record)"
                >
                  Delete
                </a-button>
              </a-popconfirm>
            </template>
          </a-table>
        </template>
      </div>
      <!--服务修改 -->
      <a-drawer
        title="服务管理 ~/~ 服务修改"
        placement="right"
        :width="720"
        :closable="false"
        :visible="visible"
        :get-container="false"
        :wrap-style="{ position: 'absolute' }"
        @close="onClose"
      >
        <!--form-->
        <div>
          <a-form
            :form="form"
            layout="vertical"
            hide-required-mark=""
          >
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="服务名称:">
                  <a-input
                    :value="ServeItemSelected.serveName"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="服务价格:">
                  <a-input
                    :value="ServeItemSelected.servePrice"
                    type="number"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="服务规格:">
                  <a-input
                    :value="ServeItemSelected.serveStander"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="适用规格:">
                  <a-input
                    :value="ServeItemSelected.suitStander"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="服务品类:">
                  <a-input
                    :value="ServeItemSelected.serveType"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="服务排期:">
                  <a-input
                    :value="ServeItemSelected.serveSchedule"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="耗时:">
                  <a-input
                    :value="ServeItemSelected.timeConsuming"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="服务等级:">
                  <a-input
                    :value="ServeItemSelected.serveGrade"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <a-button
          :style="{ marginRight: '20px' }"
          @click="onClose"
        >
          取消
        </a-button>
        <a-button
          type="primary"
          @click="onClose"
        >
          提交
        </a-button>
      </a-drawer>
      <!--服务详情  model-->
      <div>
        <a-modal
          v-model="infoModal"
          title="服务管理 ~/~ 服务详情"
          centered
          :width="900"
          @ok="infoModal = false"
        >
          <div>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="服务名称:">
                  <a-input
                    :value="ServeItemSelected.serveName"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="服务价格:">
                  <a-input
                    :value="ServeItemSelected.servePrice"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="服务规格:">
                  <a-input
                    :value="ServeItemSelected.serveStander"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="适用规格:">
                  <a-input
                    :value="ServeItemSelected.suitStander"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="服务品类:">
                  <a-input
                    :value="ServeItemSelected.serveType"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="服务排期:">
                  <a-input
                    :value="ServeItemSelected.serveSchedule"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="耗时:">
                  <a-input
                    :value="ServeItemSelected.timeConsuming"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="服务等级:">
                  <a-input
                    :value="ServeItemSelected.serveGrade"
                    :read-only="true"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </div>
        </a-modal>
      </div>
      <!--新增服务  model-->
      <div>
        <a-modal
          v-model="newItemModal"
          title="服务管理 ~/~ 新增服务"
          centered
          :width="900"
          @ok="newItemModal = false"
        >
          <div>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="服务名称:">
                  <a-input
                    :value="newServe.serveName"
                    v-decorator="[
                      'serveName',
                      {
                        rules: [{ required: true, message: '服务名称不能为空!' }],
                      },
                    ]"
                    placeholder="请输入服务名称..."
                  />
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="服务价格:">
                  <a-input
                    :value="newServe.servePrice"
                    v-decorator="[
                      'servePrice',
                      {
                        rules: [{ required: true, message: '价格不能为空' }],
                      },
                    ]"
                    placeholder="请输入商品价格..."
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="服务规格:">
                  <a-select
                    label-in-value
                    :default-value="{ key: 'default' }"
                    style="width: 416px"
                    @change="handleChange"
                  >
                    <a-select-option
                      value="default"
                      disabled
                    >
                      请选择
                    </a-select-option>
                    <a-select-option value="普修">
                      普修
                    </a-select-option>
                    <a-select-option value="精修">
                      精修
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="适用规格:">
                  <a-select
                    label-in-value
                    :default-value="{ key: 'default' }"
                    style="width: 416px"
                    @change="handleChange"
                  >
                    <a-select-option
                      value="default"
                      disabled
                    >
                      请选择
                    </a-select-option>
                    <a-select-option value="10-20kg">
                      10-20kg
                    </a-select-option>
                    <a-select-option value=" 20-35kg">
                      20-35kg
                    </a-select-option>
                    <a-select-option value="35-50kg">
                      35-50kg
                    </a-select-option>
                    <a-select-option value="50-75kg">
                      50-75kg
                    </a-select-option>
                    <a-select-option value="75-90kg">
                      75-90kg
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="服务品类:">
                  <a-select
                    label-in-value
                    :default-value="{ key: 'default' }"
                    style="width: 416px"
                    @change="handleChange"
                  >
                    <a-select-option
                      value="default"
                      disabled
                    >
                      请选择
                    </a-select-option>
                    <a-select-option value="除臭">
                      除臭
                    </a-select-option>
                    <a-select-option value="洗澡">
                      洗澡
                    </a-select-option>
                    <a-select-option value="理发">
                      理发
                    </a-select-option>
                    <a-select-option value="美容">
                      美容
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="服务排期:">
                  <a-select
                    label-in-value
                    :default-value="{ key: 'default' }"
                    style="width: 416px"
                    @change="handleChange"
                  >
                    <a-select-option
                      value="default"
                      disabled
                    >
                      请选择
                    </a-select-option>
                    <a-select-option value="9:00-10:30">
                      9:00-10:30
                    </a-select-option>
                    <a-select-option value="11:00-12:30">
                      11:00-12:30
                    </a-select-option>
                    <a-select-option value="13:30-15:00">
                      13:30-15:00
                    </a-select-option>
                    <a-select-option value="15:30-16:00">
                      15:30-16:00
                    </a-select-option>
                    <a-select-option value="16:30-17:30">
                      16:30-17:30
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-form-item label="耗时:">
                  <a-select
                    label-in-value
                    :default-value="{ key: 'default' }"
                    style="width: 416px"
                    @change="handleChange"
                  >
                    <a-select-option
                      value="default"
                      disabled
                    >
                      请选择
                    </a-select-option>
                    <a-select-option value="1小时">
                      1小时
                    </a-select-option>
                    <a-select-option value="1.5小时">
                      1.5小时
                    </a-select-option>
                    <a-select-option value="2小时">
                      2小时
                    </a-select-option>
                    <a-select-option value="3小时">
                      3小时
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item label="服务等级:">
                  <a-select
                    label-in-value
                    :default-value="{ key: 'default' }"
                    style="width: 416px"
                    @change="handleChange"
                  >
                    <a-select-option
                      value="default"
                      disabled
                    >
                      请选择
                    </a-select-option>
                    <a-select-option value="普通">
                      普通
                    </a-select-option>
                    <a-select-option value="高级">
                      高级
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
          </div>
        </a-modal>
      </div>
    </div>
  </CenterVue>
</template>

<script>
import CenterVue from '@/components/CenterVue'
// 设置表头参数
const columns = [
  { title: '服务名称', width: 80, dataIndex: 'serveName', align: 'center' },
  { title: '品类', width: 70, dataIndex: 'serveType', align: 'center' },
  { title: '排期', dataIndex: 'serveSchedule', key: 'serveSchedule', width: 100, align: 'center' },
  { title: '适用规格', dataIndex: 'suitStander', key: 'suitStander', width: 100, align: 'center' },
  { title: '服务规格', dataIndex: 'serveStander', key: 'serveStander', width: 100, align: 'center' },
  { title: '耗时', dataIndex: 'timeConsuming', key: 'timeConsuming', width: 100, align: 'center' },
  { title: '服务等级', dataIndex: 'serveGrade', key: 'serveGrade', width: 100, align: 'center' },
  { title: '价格', dataIndex: 'servePrice', key: 'servePrice', width: 80, align: 'center' },
  {
    title: '操作',
    align: 'center',
    key: 'operation',
    width: 200,
    scopedSlots: { customRender: 'action' }
  }
]
// 假数据
const data = []
for (let i = 1; i < 100; i++) {
  data.push({
    id: i,
    serveName: `A ${i}`,
    serveType: 'SSS',
    serveSchedule: 'SPIC',
    suitStander: 9.9,
    serveStander: 'VIP',
    timeConsuming: 'CD',
    serveGrade: '10-24',
    servePrice: '6'
  })
}

// 按服务品类, 服务排期, 服务等级查询联动selector
const selectionData = ['请选择', '服务品类', '服务排期', '服务等级']
const optionData = {
  请选择: [''],
  服务品类: ['猫粮', '狗粮', '猪粮'],
  服务排期: ['9:00-11:30', '11:30-12:30', '13:30-15:30', '15:30-17:30'],
  服务等级: ['普通', '高级', '贵宾']
}
export default {
  name: 'Serve',
  components: {
    CenterVue
  },
  data () {
    return {
      selectionData,
      optionData,
      selection: selectionData[0],
      option: optionData[selectionData[0]],
      secondOption: optionData[selectionData[0]][0],
      // 删除确认框标题
      title: '您确定要删除该服务吗 ?',
      // 表单
      form: this.$form.createForm(this),
      // 服务修改抽屉是否可见
      visible: false,
      // 服务详情弹窗是否可见
      infoModal: false,
      // 添加新服务弹窗是否可见
      newItemModal: false,
      // 加载动画
      loading: false,
      // 数据源
      data,
      // 表格表头
      columns,
      // 选择服务id
      idSelected: 0,
      // 被选择服务对象
      ServeItemSelected: {
        id: 10,
        serveName: `A `,
        serveType: 'SSS',
        serveSchedule: 'SPIC',
        suitStander: 9.9,
        serveStander: 'VIP',
        timeConsuming: 'CD',
        serveGrade: '10-24',
        servePrice: '6'
      },
      // 新商品对象
      newServe: {
        serveName: ``,
        serveType: '',
        serveSchedule: '',
        suitStander: '',
        serveStander: '',
        timeConsuming: '',
        serveGrade: '',
        servePrice: 9.9
      },
      // 分页器
      pagination: {
        total: 0,
        current: 1,
        defaultPageSize: 8
        // 每页展示数据条数 默认关闭
        // showSizeChanger: true,
        // pageSizeOptions: ['5', '10', '15', '20']
      }
    }
  },
  created () {
    this.idSelected = this.ServeItemSelected.id
  },
  methods: {
    // 下拉选择监听
    handleChange (e) {
      console.log(e)
    },
    handleSelectionChange (value) {
      console.log(value)
      this.selection = value
      this.option = optionData[value]
      this.secondOption = optionData[value][0]
    },
    queryBySelection () {
      console.log('您选择的是按 ' + this.selection + ' 查询, 查询参数: ' + this.secondOption)
    },
    // table
    getInfo (obj) {
      this.infoModal = true
      this.ServeItemSelected = obj
      // alert(JSON.stringify(this.ServeItemSelected))
      console.log('每页数据:' + this.pagination.defaultPageSize)
      console.log('当前页码:' + this.pagination.current)
    },
    tableChange (e) {
      this.pagination.current = e.current
    },
    // 抽屉
    afterVisibleChange (val) {
      console.log('visible', val)
    },
    showDrawer (obj) {
      this.visible = true
      this.ServeItemSelected = obj
      // alert(JSON.stringify(this.ServeItemSelected))
    },
    onClose () {
      this.visible = false
    },
    // modal..
    // 日期选项函数
    onDateChange (date, dateString) {
      console.log(date, dateString)
    },
    // 删除服务前,获取被删除服务的id
    getGoodsId (obj) {
      this.ServeItemSelected = obj
      this.idSelected = this.ServeItemSelected.id
    },
    // 删除服务按钮
    confirm (e) {
      // 进行删除操作
      this.$message.success('Click on Yes')
    },
    cancel (e) {
      this.$message.error('操作取消!')
    }
  }
}
</script>

<style scoped>
.draw{
  height: 800px;
  width: 1200px;
  overflow: hidden;
  position: relative;
  border: 1px solid #ebedf0;
  borderRadius: 2px;
  padding: 48px;
  textAlign: center;
  background: #fafafa
}
.tool{
  margin-top: 10px;
  display: flex;
}
.my_table{
  margin-top: 10px;
}
span{
  font-weight: bolder;
  font-size: 25px;
}
img{
  background-color: #b7b7b7;
  width: 400px ;
  height: 150px;
}
</style>
